<template>
    <div class="app-container">
      <Header />
      <div class="main-content">
        <Sidebar />
        <router-view class="content-area" />
      </div>
    </div>
  </template>
  
  <script setup>
  import Header from './components/Header.vue'
  import Sidebar from './components/Sidebar.vue'
  </script>
  
  <style scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  
  .content-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }
  </style>